<template>
  <!-- <view
    class="navigation-bar-wrapper"
    :style="{ height: navigationBarHeight + 'px', paddingTop: statusBarHeight + 'px' }"
  >
    <view class="_back-btn" @tap="back">
      <image class="line-back" :src="stitchingURL('line/goBack')"></image>
    </view>
    <slot></slot>
  </view> -->
  <uni-nav-bar :border="false" dark :fixed="true" shadow color="#3a3a3a" background-color="#fff" status-bar left-icon="left" @clickLeft="back">
    <view style="color: red;">自定义导航</view>
  </uni-nav-bar>
</template>

<script setup>
  // import { stitchingURL } from "@/common/util.js";
  import { ref } from 'vue';

  const app = getApp();
  // const navigationBarHeight = ref(app.globalData.navigationBarHeight);
  // const statusBarHeight = ref(app.globalData.statusBarHeight);
  const emit = defineEmits(['onBack']);


  const back = () => {
    emit('onBack');
  }

</script>

<style lang="scss" scoped>
.navigation-bar-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  ._back-btn {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    width: 80upx;
    height: 100%;
    display: flex;
    justify-content: center;
    .line-back {
      position: absolute;
      bottom: 27upx;
      left: 50%;
      display: block;
      width: 18upx;
      height: 34upx;
    }
  }
}
</style>
